<script setup lang="ts">
import { h, onMounted } from 'vue'
import dayjs from 'dayjs'
import optionsTestData from '@/components/SearchPanel/optionsTestData'
import wsl1 from '@/assets/imgs/wsl1.webp'

const columns: TableColConfig[] = [
	{
		prop: 'date',
		columnKey: 'date',
		label: '日期',
		// width: '200',
		align: 'center',
	},
	{
		prop: 'name',
		columnKey: 'name',
		label: '姓名',
		// width: '200',
		align: 'center',
		childrenCols: [
			{
				prop: 'firstName',
				columnKey: 'firstName',
				label: '姓',
				// width: '100',
				align: 'center',
				headerRender: (scope) => {
					//console.log(scope)
					return h('span', { style: { color: 'green' } }, scope.column.label)
				},
				childrenCols: [
					{
						prop: 'rank',
						columnKey: 'rank',
						label: '排名',
						// width: '100',
						align: 'center',
						contentRender: (scope) => h('span', { style: { color: 'skyblue' } }, scope.row.rank),
					},
					{
						prop: 'fontNum',
						columnKey: 'fontNum',
						label: '字数',
						// width: '100',
						align: 'center',
					},
				],
			},
			{
				prop: 'lastName',
				columnKey: 'lastName',
				label: '名',
				// width: '100',
				align: 'center',
			},
		],
	},
	{
		prop: 'address',
		columnKey: 'address',
		label: '地址',
		// width: '300',
		align: 'center',
		showOverflowTooltip: true,
	},
	{
		prop: 'operate',
		columnKey: 'operate',
		label: '操作',
		width: '150',
		align: 'center',
		fixed: 'right',
		resizable: false,
	},
]
const data = [
	{
		date: 162317823189237,
		name: '王小虎1',
		address: '上海市普陀区金沙江路 1518 弄',
		firstName: '王',
		rank: 5,
		fontNum: 1,
		lastName: '小虎1',
	},
	{
		date: 127366128312312,
		name: '王小虎2',
		address: '上海市普陀区金沙江路 1517 弄sadasdsadsadasdasdasfdfafdedfdweasdasdweqweeadsadasdasdasfasfdsfdsfdsfdsfdsgdfaFDSFSADFS',
		firstName: '王',
		rank: 5,
		fontNum: 1,
		lastName: '小虎2',
	},
	{
		date: 1237812312983,
		name: '王小虎3',
		address: '上海市普陀区金沙江路 1519 弄',
		firstName: '王',
		rank: 5,
		fontNum: 1,
		lastName: '小虎3',
	},
	{
		date: 1723127310923,
		name: '王小虎4',
		address: '上海市普陀区金沙江路 1516 弄',
		firstName: '王',
		rank: 5,
		fontNum: 1,
		lastName: '小虎4',
	},
]

const printConfig = {
	id: 'homePage', //这里的id就是上面我们的打印区域id，实现指哪打哪
	popTitle: '配置页眉标题', // 打印配置页上方的标题
	//extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
	preview: false, // 是否启动预览模式，默认是false
	previewTitle: '预览的标题', // 打印预览的标题
	previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
	zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
	previewBeforeOpenCallback() {
		//console.log('正在加载预览窗口！')
	}, // 预览窗口打开之前的callback
	previewOpenCallback() {
		//console.log('已经加载完预览窗口，预览打开了！')
	}, // 预览窗口打开时的callback
	beforeOpenCallback() {
		//console.log('开始打印之前！')
	}, // 开始打印之前的callback
	openCallback() {
		//console.log('执行打印了！')
	}, // 调用打印时的callback
	closeCallback() {
		//console.log('关闭了打印工具！')
	}, // 关闭打印的callback(无法区分确认or取消)
	clickMounted() {
		//console.log('点击v-print绑定的按钮了！')
	},
}

onMounted(() => {
	// window.print()
})

function see(row: ObjType) {
	console.log('see', row)
}

function update(row: ObjType) {
	console.log('update', row)
}
</script>

<template>
	<div class="home" id="homePage">
		<search-panel :options="optionsTestData" />
		<my-table border :columns="columns" :data="data" style="margin-top: 30px">
			<template #name-header="scope">
				<p style="text-align: center; color: red">{{ scope.column.label }}</p>
			</template>
			<template #date="scope">
				<p style="text-align: center">
					{{ dayjs(scope.row.date).format('YYYY-MM-DD') }}
				</p>
			</template>
			<template #operate="scope">
				<el-button type="primary" @click="see(scope.row)" size="small">查看</el-button>
				<el-button type="primary" @click="update(scope.row)" size="small">修改</el-button>
			</template>
		</my-table>

		<el-button type="primary" v-print="printConfig" style="margin: 10px" :disabled="false">打印当前页内容</el-button>

		<bar-code
			:init="true"
			info="hhh"
			:options="{
				height: 80,
				width: 2,
				displayValue: false,
			}"
		/>
		<bar-code
			:init="true"
			info="lll"
			:options="{
				height: 80,
				width: 2,
				displayValue: false,
			}"
		/>
		<qr-code />
		<qr-code :logo="wsl1" />
		<wang-editor />
		<drag-between-list-test />
	</div>
</template>

<style scoped lang="scss">
.home {
	margin-bottom: 50px;
}
</style>
